{extend name="public/iframe" /}

{block name="top"}
{:load_assets('jstree,select2,form','css')}
{/block}

{block name="content"}
<div class="card card-body {eq name='layout' value='dialog'}shadow-none{/eq}">									
    <form action="" method="post" id="auth-group-form">
        <input type="hidden" name="rules" value="" id="rules">
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">父级</label>
            <div class="col-xl-4 col-sm-5 col-12 form-item">
                <select class="form-select" name="pid" id="pid"  data-control="select2" data-language="zh-CN" data-allow-clear="false" data-placeholder="请选择" data-rule="父级:required">
                    {foreach name="groups" item="group"}
                    <option value="{$group.id}" {eq name="group.id" value="$pid"}selected{/eq}>{$group.prefix}{$group.title}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">用户组名称</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <input type="text" class="form-control" name="title" value="" data-rule="用户组名称:required;length(~20)">
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label">描述信息</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <textarea name="desc" class="form-control" rows="2" data-rule="描述信息:length(~200)"></textarea>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label">描述信息</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <div class="tree-toolbox  mb-2">
                    <div class="input-group">
                        <span class="btn btn-sm btn-light-primary mr-2 open-all">全部展开</span>
                        <span class="btn btn-sm btn-light-primary mr-2 close-all">全部收起</span>
                        <span class="btn btn-light-primary mr-2 btn-sm select-all">全部选择</span>
                        <span class="btn btn-light-primary mr-2 btn-sm deselect-all">取消全选</span>
                        <input type="text" name="" class="form-control form-control-sm d-none d-sm-inline" id="search-text">
                        <span class="btn btn-primary btn-sm search-all d-none d-sm-inline">搜索</span>
                    </div>
                </div>
                <div id="rules-tree"></div>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">状态</label>
            <div class="col-lg-10 col-sm-9 col-12 mt-sm-2 form-item">
                <div class="form-check form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="status"  value="1" checked data-rule="状态:checked"> 启用
                    </label>
                </div>
                <div class="form-check  form-check-custom form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="status"  value="0"> 禁用
                    </label>
                </div>
            </div>
        </div>
        {include file="public/formfooter" /}
    </form>
</div>
{/block}

{block name="bottom"}
{:load_assets('jstree,select2,form','js')}
<script>

    //获取所有已选中的节点id，包括半选
    function get_all_selected_ids()
    {
        var tree = $('#rules-tree').jstree(true);
        var selected = tree.get_selected();
        var undetermined = tree.get_undetermined();
        var all =  $.merge(selected,undetermined);
        return all ? all.join(',') : '';
    }

    $(function(){

        $('#pid').change(function(){
            $('#rules-tree').jstree(true).refresh();
        });

        $('#rules-tree').jstree({
                "core" : {
                    "data" : function(obj,callback){
                        var pid = $('#pid').val() || 1;
                        myadmin.ajaxGet('{:url("get_auths")}',{pgroup_id:pid},function(res){
                            if(res.data.auths){
                                callback.call(this,res.data.auths);
                            }else{
                                callback.call(this,[]);
                            }
                            
                        },function(){
                            //加载数据失败，显示为空
                            callback.call(this,[]);
                        })
                    },
                    "themes" : {
                         //"stripes" : false,//背景是否显示间纹。
                         "dots": true,//是否显示树连接线
                         "icons": false,//是否显示节点的图标
                         "ellipsis": false,//节点名过长时是否显示省略号
                    }
                },
            "plugins" : [ "search", "checkbox" ]
        });

        // $('#rules-tree').on("deselect_node.jstree", function (e, data) {
        //     for(let i=0;i<data.node.parents.length;i++){
        //         let node_id = data.node.parents[i];
        //         if(node_id !== '#'){
        //             let is_undetermined = $('#rules-tree').jstree(true).is_undetermined({id:node_id});
        //             if(!is_undetermined){
        //                 $('#rules-tree').jstree(true).check_node({id:node_id});
        //             }
        //         }
        //     }
            
        // });

        $('#auth-group-form').validator({
            stopOnError: true,
            invalidClass: 'is-invalid',
            timely:2,
            display: function(input) {
                return $(input).attr('placeholder');
            },
            target: function(input) {
                var $formitem = $(input).closest('.form-item');
                    $msgbox = $formitem.find('div.msg-box');
                if (!$msgbox.length) {
                    $msgbox = $('<div class="msg-box mb-5"></div>').appendTo($formitem);
                }
                return $msgbox;
            },
            valid: function(forms) {
                // 防止重复提交表单
                this.holdSubmit();
                //设置已选中的ids到隐藏域
                $('#rules').val(get_all_selected_ids());
                //提交表单
               form.actions.submitForm(forms);

                //解除重复提交限制
                this.holdSubmit(false);
            }
        });



        $('.open-all').click(function(){
            $('#rules-tree').jstree(true).open_all();
        });

        $('.close-all').click(function(){
            $('#rules-tree').jstree(true).close_all();
        });

        $('.select-all').click(function(){
            $('#rules-tree').jstree(true).select_all();
        });

        $('.deselect-all').click(function(){
            $('#rules-tree').jstree(true).deselect_all();
        });

        $('.search-all').click(function(){
            var search_text = $('#search-text').val();
            $('#rules-tree').jstree(true).search(search_text);
        });
    })
</script>
{/block}